<template>
	<view class="functionBtnBox">
		<view class="functionBtn">
			<upload-file></upload-file>
			<upload-img></upload-img>
			<upload-video></upload-video>
			<upload-voice></upload-voice>
			
		</view>
		<view class="sendMessage" @click="sendMessage">
			发送
		</view>

	</view>
</template>

<script>
	import uploadImg from './uploadImg/uploadImg.vue'
	import uploadVideo from './uploadVideo/uploadVideo.vue'
	import uploadVoice from './uploadVoice/uploadVoice.vue'
	import uploadFile from './uploadFile/uploadFile.vue'
	import MyMessage from '../../utils/MyMessage.js'
	export default {
		name: "chatFunctionBox",
		props: {
			sendMessageBox: null
		},
		components:{
			uploadImg,
			uploadVideo,
			uploadVoice,
			uploadFile
		},
		data() {
			return {

			};
		},
		mounted() {
			document.onkeydown = (ev) => {
				var event = ev || event
				if (event.keyCode == 13) {
					this.sendMessage()
				}
			}
		},
		methods: {
			sendMessage() {
				try{
					if (!this.sendMessageBox.$el.innerText) {
						uni.showToast({
							title: '内容不能为空！' //只显示错误时候的消息
						})
					
						return
					}
					// this.$store.state.chat.ws.sendMessage({
					// 	msg: {
					// 		postType: 'postMessage',
					// 		accept_id: this.$store.state.chat.chatObjectInfo.chatObjectData.id,
					// 		accept_type: 1,
					// 		type: 1,
					// 		content: this.sendMessageBox.$el.innerText
					// 	}
					// })
				
					var message= new MyMessage({accept_type:this.$store.state.chat.chatObjectInfo.chatObjectData.accept_type,type:1,content:this.sendMessageBox.$el.innerText,ws:this.$store.state.chat.ws})
					message.addMessageList(message)
					this.$nextTick(() => {
						this.sendMessageBox.$el.innerText = ''
					})
				}catch(err){
					
					this.$store.dispatch('chat/getChatObjectList')
				}
				
			}
			
	
		}
	}
</script>

<style scoped lang="scss">
	.functionBtnBox {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: darkgrey 3px 5px 12px 1px;

		.functionBtn {
			height: 70rpx;
			width: 400rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 10rpx;

			// border: 1px solid red;
			}

		.sendMessage {
			width: 150rpx;
			height: 70rpx;
			color: #F7F8FA;
			text-align: center;
			line-height: 70rpx;
			border-radius: 10rpx;
			background-color: #07DC00;
		}

		.sendMessage:hover {
			cursor: pointer;
		}

	}
</style>
